<template>
    <div class="middle-bg">
        <div class="map-circle-bg">
            <div @click="onChangeMap(item,index)" v-for="(item,index) in mapList" :key="index" class="thumb-img" :style="{'-webkit-transform': 'translate('+item.x+'px,'+item.y+'px'+')','-ms-transform': 'translate('+item.x+'px,'+item.y+'px'+')','-moz-transform': 'translate('+item.x+'px,'+item.y+'px'+')','-o-transform': 'translate('+item.x+'px,'+item.y+'px'+')','transform': 'translate('+item.x+'px,'+item.y+'px'+')'}">
                <img :src="item.thumbImage" alt="">
            </div>
        </div>
        <div class="current-map">
            <img :src="currentMap.defaultImage" alt="">
        </div>
        <div class="map-bottom-bg">
            <img src="../../assets/dp2/map-bottom-bg.png" alt="">
        </div>
        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp2/bottom-bg.png" alt="">
        </div>
    </div>
</template>

<script>

import Pubsub from "../../utils/pubsub";

const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");

const fxBig = require("../../assets/dp2/fxq-big.png");

//乡镇缩略地图
const dssThumb = require("../../assets/dp2/dss-thumb.png");
const xazThumb = require("../../assets/dp2/xaz-thumb.png");
const ttsThumb = require("../../assets/dp2/tts-thumb.png");
const fxzThumb = require("../../assets/dp2/fxz-thumb.png");
const fxqThumb = require("../../assets/dp2/fxq-thumb.png");
const mybThumb = require("../../assets/dp2/myb-thumb.png");
const ygxThumb = require("../../assets/dp2/ygx-thumb.png");
const tzyThumb = require("../../assets/dp2/tzy-thumb.png");
const jdxThumb = require("../../assets/dp2/jdx-thumb.png");
const dzbThumb = require("../../assets/dp2/dzb-thumb.png");

//乡镇地图

const dssBig = require("../../assets/dp2/dss-big.png");
const xazBig = require("../../assets/dp2/xaz-big.png");
const ttsBig = require("../../assets/dp2/tts-big.png");
const fxzBig = require("../../assets/dp2/fxz-big.png");
const mybBig = require("../../assets/dp2/myb-big.png");
const ygxBig = require("../../assets/dp2/ygx-big.png");
const tzyBig = require("../../assets/dp2/tzy-big.png");
const jdxBig = require("../../assets/dp2/jdx-big.png");
const dzbBig = require("../../assets/dp2/dzb-big.png");

export default {
    data() {
        return {
            currentIndex: 1,
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1, path: "/dp1" },
                { name: "党建专题", icon: djztIcon, type: 2, path: "/dp2" },
                { name: "政务专题", icon: zwztIcon, type: 3, path: "/dp3" },
                { name: "综治专题", icon: zzztIcon, type: 4, path: "/dp4"  },
                { name: "城管专题", icon: cgztIcon, type: 5 ,path:"/dp5"},
                { name: "", icon: "+", type: 6 }
            ],
            currentMap: {defaultImage:fxBig,name:"肥乡区",town:"all",thumbImage:fxqThumb},
            mapList: [
                {
                    name: "大寺上镇",
                    thumbImage: dssThumb,
                    defaultImage: dssBig,
                    x: "0",
                    y: "0",
                    town:"大寺上镇"
                },
                {
                    name: "辛安镇镇",
                    thumbImage: xazThumb,
                    defaultImage: xazBig,
                    x: "0",
                    y: "0",
                    town:"辛安镇镇"
                },
                { name: "天台山镇",town:"天台山镇", thumbImage: ttsThumb, defaultImage: ttsBig,x:"0",y:"0" },
                { name: "肥乡镇", town:"肥乡镇",thumbImage: fxzThumb, defaultImage: fxzBig ,x:"0",y:"0"},
                { name: "毛演堡镇",town:"毛演堡镇", thumbImage: mybThumb, defaultImage: mybBig ,x:"0",y:"0"},
                { name: "元固乡",town:"元固乡", thumbImage: ygxThumb, defaultImage: ygxBig ,x:"0",y:"0"},
                { name: "西吕营镇",town:"西吕营镇", thumbImage: tzyThumb, defaultImage: tzyBig ,x:"0",y:"0"},
                { name: "旧店乡",town:"旧店乡", thumbImage: jdxThumb, defaultImage: jdxBig,x:"0",y:"0" },
                { name: "东漳堡镇",town:"东漳堡镇", thumbImage: dzbThumb, defaultImage: dzbBig,x:"0",y:"0" }
            ],
        };
    },
    mounted() {
        let coord = [
            {name:"大寺上镇",x:"-370",y:"40"},
            {name:"辛安镇镇",x:"-463",y:"-100"},
            {name:"天台山镇",x:"-360",y:"-245"},
            {name:"肥乡镇",x:"-192",y:"-305"},
            {name:"毛演堡镇",x:"-10",y:"-323"},
            {name:"元固乡",x:"175",y:"-310"},
            {name:"西吕营镇",x:"355",y:"-243"},
            {name:"旧店乡",x:"455",y:"-100"},
            {name:"东漳堡镇",x:"365",y:"40"},
        ];
        this.timer = setTimeout(() => {
            this.mapList.map((item,index)=>{
                item.x = coord[index].x;
                item.y = coord[index].y;
            })
        }, 500);
    },
    methods: {
        /**
         * 点击小地图事件
         */
        onChangeMap(item,index){
            let temp = {
                name:item.name,
                town:item.town,
                thumbImage:item.thumbImage,
                defaultImage:item.defaultImage,
            }
            this.mapList[index] = Object.assign(item,this.currentMap);
            Pubsub.publish("refreshDpTownData",{town:temp.town});
            console.log(temp,"cccccc")
            this.currentMap = temp;
        },
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.middle-bg {
    width: 1200px;
    position: relative;
    display: flex;
    justify-content: center;
}
.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1200px;
    position: absolute;
    bottom: 0;
    .bottom-bg {
        // margin-left: 30px;
    }
}
.bottom-wrapper {
    width: 585px;
    height: 55px;
    // margin-left: 30px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 67px;
}
.dp-handle-row {
    text-align: center;
    color: #ffd6d6;
    &.active {
        .circle-row {
            opacity: 1;
        }
        color: #f0f7ff;
    }
    .circle-row {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        margin-bottom: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(
                0deg,
                #811818 0%,
                #ac3d3d 51%,
                #d76262 100%
            ),
            linear-gradient(#bfbfbf, #bfbfbf);
        background-blend-mode: normal, normal;
        box-shadow: 1.5px 2.6px 19px 1px rgba(0, 0, 0, 0.96);
        opacity: 0.4;
    }
}
.icon-row {
    height: 85px;
    width: 85px;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
.icon {
    z-index: 999;
}
.map-bottom-bg {
    position: absolute;
    bottom: 100px;
    // width: 1200px;
    display: flex;
    justify-content: center;
}
.current-map {
    position: absolute;
    bottom: 210px;
    // width: 1200px;
    display: flex;
    justify-content: center;
    animation: move 3s linear infinite;
    z-index: 9;
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.map-circle-bg {
    height: 464px;
    width: 925px;
    border-radius: 50%;
    border: 1px solid #5a1717;
    margin-top: 185px;
    position: relative;
    .thumb-img {
        position: absolute;
        left: 50%;
        margin-left: -62px;
        top: 50%;
        margin-top: 30px;
        // z-index: 999;
        transition: all 1s linear;
        cursor: pointer;
        img{
            height: 125px;
            width: 125px;
        }
    }
}
</style>